<template>
  <div class="photo">
    <div class="photo_item">
      <div class="photo_item-title">{{item.entname}}</div>
      <div class="photo_item-info">
        <span>
          业务类型：{{item.opertype | dict('CD01')}}
        </span>
        <span>
          申请时间：：{{item.appdate}}
        </span>
      </div>
    </div>
    <div class="photo_middle">
  <canvas v-for="page in pages" :id="'the-canvas'+page" :key="page"></canvas>
  </div>
    <div class="photo_bottom">
      <div class="bottom">
    <Button type="warning" @click="retur">退回经办人</Button>
    <Button type="primary" @click="sure">确认提交</Button>
  </div>
      <MyFooter />
    </div>
  </div>
</template>

<script>
  import Loading from '../../components/Loading'
  import MyFooter from '../../components/MyFooter.vue'
  import PDFJS from 'pdfjs-dist'
  export default {
    data() {
      return {
        title: '',
        pdfDoc: null,
        loadding: false,
        pages: 0,
        item: {},
        url: ''
      }
    },
    components: {
      MyFooter
    },
    methods: {
      retur() {
        this.$router.push({name: 'ConfirmDoBack'})
      },
      sure() {
        if (this.item.isApplyer === '1') {
          this.$router.push({name: 'BusinessConfirmSign'})
        } else {
          this.$router.push({name: 'BusinessConfirmAuth'})
        }
      },
      renderPage(num) {
        let _this = this
        this.pdfDoc.getPage(num).then(function(page) {
          let canvas = document.getElementById('the-canvas' + num)
          let ctx = canvas.getContext('2d')
          let dpr = window.devicePixelRatio || 1
          let bsr = ctx.webkitBackingStorePixelRatio ||
                    ctx.mozBackingStorePixelRatio ||
                    ctx.msBackingStorePixelRatio ||
                    ctx.oBackingStorePixelRatio ||
                    ctx.backingStorePixelRatio || 1
          let ratio = dpr / bsr
          var viewport = page.getViewport(screen.availWidth / page.getViewport(1).width)
          canvas.width = viewport.width * ratio
          canvas.height = viewport.height * ratio
          canvas.style.width = viewport.width + 'px'
          canvas.style.height = viewport.height + 'px'
          ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
          var renderContext = {
            canvasContext: ctx,
            viewport: viewport
          }
          page.render(renderContext)
          if (_this.pages > num) {
            _this.renderPage(num + 1)
          }
        })
        this.$Spin.hide()
      },
      loadFile(url) {
        console.log(url)
        let _this = this
        this.$Spin.show({
            render: (h) => h(Loading)
          })
        PDFJS.getDocument(url).then(function(pdf) {
          _this.pdfDoc = pdf
          _this.pages = _this.pdfDoc.numPages
          _this.$nextTick(() => {
            _this.renderPage(1)
          })
        }, error => {
          console.log(error)
          _this.$ErrorAlert('电子文书还未生成，请过几分钟后再做此操作')
          this.$Spin.hide()
        })
      },
      initHtml() {
        this.item = JSON.parse(sessionStorage.getItem('confirm'))
        let connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection || { tyep: 'unknown' }
        if (connection.type !== 'wifi') {
          this.$Modal.confirm({
            title: '流量消耗提醒',
            content: '<p>您现在网络为非WIFI状态，浏览PDF文书会消耗大约10M以下手机流量，请选择是否继续浏览</p>',
            okText: '继续',
            onOk: () => {
              this.url = '/ect/outer/confirm/loaddoc.do?gid=' + this.item.gid
              this.loadFile(this.url)
            },
            onCancel: () => {}
          })
        } else {
          this.url = '/ect/outer/confirm/loaddoc.do?gid=' + this.item.gid
          this.loadFile(this.url)
        }
      }
    },
    mounted() {
      PDFJS.GlobalWorkerOptions.workerSrc = '/ect/wechat/static/pdf/pdf.worker.js'
      this.initHtml()
    }
}
</script>

<style lang="scss" scoped>
  .photo {
    position: relative;
    height: 100%;
    background: #f3f3f3;
    // padding-bottom: 4rem;
    &_item {
      padding: 0.54rem;
      background: #fff;
      // height: 20%;
      &-title {
        color: #00b3ff;
        overflow: hidden;
        white-space: nowrap;
        border-bottom: 1px solid #eaeaea;
        padding-bottom: 0.22rem;
        margin-bottom: 0.14rem;
      }
      &-info {
        display: flex;
        justify-content: space-between;
        font-size: 0.5rem;
        color: #7d7d7d;
        overflow: hidden;
        white-space: nowrap;
        padding: 0.36rem 0;
      }
    }
    &_pic {
      padding: 5%;
      img {
        width: 100%;
      }
    }
    &_middle {
      width: 100%;
      height: 70%;
      overflow-y: auto;
    }
    &_bottom {
      position: absolute;
      width: 100%;
      height: 15%;
      bottom: 0;
    }
    .bottom {
    display: flex;
    justify-content: space-around;
    // padding: 0.54rem;
    button {
      width: 45%;
      padding-top: 0.36rem;
      padding-bottom: 0.36rem;
      font-size: 0.57rem;
    }
  }
  }

</style>
